<template>
  <el-container class="layout">
    <v-plain-header>
      <span class="message" @click="$router.push('/message')">
        <i class="iconfont icon-tixing"></i>
        提醒
        <v-plain-tips :num="allCount"/>
      </span>
      <el-dropdown @command="dropListMethods" trigger="click" :key="userInfo.username">
                <span>
                  {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="item.command" v-for="item in dropList" :key="item.command">
            {{item.label}}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </v-plain-header>
    <el-container class="main pd-10">
      <el-aside width="auto">
        <v-plain-menu :menus="menus"/>
      </el-aside>
      <el-main>
        <v-plain-bread/>
        <router-view></router-view>
      </el-main>
    </el-container>
    <v-plain-footer/>
  </el-container>
</template>
<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import vPlainMenu from '@/components/plain-menu'
  import vPlainHeader from '@/components/plain-header'
  import vPlainFooter from '@/components/plain-footer'
  import vPlainBread from '@/components/plain-bread'
  import { Action, Getter, Mutation } from 'vuex-class'
  import vPlainTips from '@/components/plain-tips'

  @Component(
    {
      components: {
        vPlainMenu, vPlainHeader, vPlainFooter, vPlainBread, vPlainTips
      }
    }
  )
  export default class Layout extends Vue {
    menus = [
      {
        name: '主页',
        url: '/home',
        icon: 'icon-shouye'
      },
      {
        name: '票据服务',
        url: '/bill-service',
        icon: 'icon-piaojufuwu',
        menuDtos: [
          {
            name: '票据融资',
            url: '/bill-service/financing',
            icon: ''
          }
          // {
          //   name: '票据收购',
          //   url: '/bill-service/purchase',
          //   icon: ''
          // }
        ]
      },
      {
        name: '交易管理',
        url: '/transaction',
        icon: 'icon-jiaoyiguanli',
        menuDtos: [
          {
            name: '票据库存',
            url: '/transaction/inventory',
            icon: ''
          },
          {
            name: '询价管理',
            url: '/transaction/offer',
            icon: ''
          },
          {
            name: '订单管理',
            url: '/transaction/order',
            icon: ''
          }
        ]
      }
    ]
    dropList = [
      {
        command: '/user-center/base',
        label: '基本资料'
      },
      {
        command: '/user-center/safe',
        label: '安全设置'
      },
      {
        command: '/user-center/auth',
        label: '实名认证'
      },
      {
        command: '/user-center/account',
        label: '兴业电子户'
      },
      {
        command: 'exit',
        label: '退出登录'
      }
    ]
    @Mutation removeUserInfo
    @Mutation makeBreadList
    @Action getMenusTips
    @Getter userInfo
    @Action getUnreadTips
    @Getter unreadTips
    get allCount () {
      return this.unreadTips.allCount
    }

    async exit () {
      let res: AjaxResponse = await this.$axios.post('b/boms/user/logout')
      this.removeUserInfo()
      this.$utils.tips(res)
      this.$router.push('/login')
    }

    dropListMethods (command) {
			//在这里加个实名认证的判断，先判断是否实名过，
			// switch (command) {
       //  case  'exit':
       //      this.exit()
       //      break
       //  default :
       //      this.$router.push(command)
			// }
			// if(this.userInfo.certificationStatus >= 4){
       //  this.$router.push('/user-center/auth/amount')
			// }else{
       //  switch (command) {
       //     case  'exit':
       //         this.exit()
       //         break
       //     default :
       //         this.$router.push(command)
       //  }
			// }

      switch (command) {
        case  'exit':
          this.exit()
          break
        default :
          if(command === '/user-center/auth' && this.userInfo.certificationStatus >= 4) {//不加这个判断了
            this.$router.push('/user-center/auth/amount')
          }else {
            this.$router.push(command)
          }
      }
    }

    mounted () {
      this.getMenusTips()
      this.getUnreadTips()
      this.$router.afterEach((to, form) => {
        this.makeBreadList(this)
      })
      if (this.userInfo.certificationStatus === 4) {

      } else {
        this.menus = []
        this.$router.push('/user-center/auth/step-1')
      }
    }
  }
</script>
<style lang="less">
  .edit-el-intput-suffix{
    margin-right: 578px;
  }
  .el-form-item.is-success .el-input__inner{
    border-color: #ddd;
  }
  .pageation {
    display: flex;
    justify-content: space-between;
  }
</style>
<style lang="less" scoped>
  .layout {
    height: 100vh;
    flex-direction: column;
  }

  .main {
    flex: 1;
    display: flex;
    background: #f0f2f5;
  }

  .el-main {
    padding: 0 20px;
    min-width: 1200px;
    display: flex;
    flex-direction: column;
  }

  .message {
    color: #666;
    font-size: 18px;
    margin-right: 20px;
    cursor: pointer;
    > span {
      vertical-align: text-bottom;
      margin-left: 0;
    }
  }
  
</style>
